<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>保存图片</title>
</head>

<body>
<div id="app">
    <img src="" id="image" alt="">
    <a onclick="getImage()">toImage</a>
    <div id="test">test</div>
</div>
<script src="../js/html2canvas.js" type="text/javascript"></script>

<script>
		function getImage() {
			html2canvas(document.getElementById('test'), {
				allowTaint: true, //是否允许跨域
				useCORS: true, //是否尝试加载跨源图像作为CORS服务，在返回到代理（用来解决图片跨域加载问题）
				scale: window.devicePixelRatio,
				// width:1200,
				// height:500,
				onrendered: function (canvas) {
					var url = canvas.toDataURL()
					var triggerDownload = document.getElementById('image')
					triggerDownload.setAttribute('src', url)
					// triggerDownload.setAttribute('href', url)
					triggerDownload.style.display = 'block'
					setTimeout(() => {
						triggerDownload.style.display = 'none'
					}, 30000)
				},
			})
		}
</script>

</body>

</html>